﻿@{
    Layout = "_Layout";
    ViewData["Title"] = "时段字典管理";
}

<el-container>
    <avue-crud :data="tableData" :option="option" :permission="hasPermission" :page.sync="pageOption" :table-loading="loading"
               v-on:refresh-change="refreshChange"
               v-on:row-save="handleRowSave"
               v-on:row-update="handleRowUpdate"
               v-on:row-del="handleRowDel"
               v-on:search-change="searchChange"
               v-on:search-reset="resetChange"
               :cell-style="cellStyle"
               v-on:on-load="onLoad">
        <template slot="record" slot-scope="scope">
            <modify-record :data="scope.row"></modify-record>
        </template>
    </avue-crud>
</el-container>

@section Scripts {
    <script>
        new Vue({
            el: '#app',
            mixins: [curdMixin],
            data() {
                return {
                    themeV: localStorage.getItem('themeV'),
                    name: "insDictMeridiem",
                    pageUrl: `/insDictMeridiem/pages`,
                    addUrl: `/insDictMeridiem/add`,
                    editUrl: `/insDictMeridiem/update`,
                    deleteUrl: `/insDictMeridiem/delete`,

                    option: {
                        searchShowBtn: Permissions.avePermission(`insDictMeridiem:searchBtn`),
                        refreshBtn: Permissions.avePermission(`insDictMeridiem:searchBtn`),
                        menuWidth: '350',
                        rowKey: 'id',
                        searchShow: false,
                        column: [
                            {
                                prop: "id",
                                label: `${this.i18n.t('primary_key')}`,
                                search: false,
                                hide: true,
                                type: "number",
                                display: false,
                                showColumn: false
                            },
                            {
                                prop: "code",
                                label: `时段代码`,
                                slot: true,
                                search: true,
                                hide: false,
                                width: '100',
                                clearable: true,
                                rules: [{
                                    required: true,
                                    trigger: "blur",
                                    message: `${this.i18n.t('pleaseenter')}`
                                }]
                            },
                            {
                                prop: "name",
                                label: `时段名称`,
                                slot: true,
                                search: true,
                                hide: false,
                                width: '120',
                                clearable: true,
                                rules: [{
                                    required: true,
                                    trigger: "blur",
                                    message: `${this.i18n.t('pleaseenter')}`
                                }]
                            },
                            {
                                prop: "sort",
                                label: `排序`,
                                search: false,
                                hide: false,
                                type: "number",
                                value: 10,
                                step: 1,
                                min: 1,
                                max: 9999,
                                width: '80',
                                rules: [{
                                    required: true,
                                    trigger: "blur",
                                    message: `${this.i18n.t('pleaseenter')}`
                                }]
                            },
                            {
                                prop: "isDefault",
                                label: `是否默认`,
                                search: true,
                                hide: false,
                                value: 0,
                                type: "radio",
                                button: true,
                                dicData: [
                                    { label: `默认`, value: 1 },
                                    { label: `未默认`, value: 0 }
                                ],
                                width: '100'
                            },
                            {
                                prop: "isDisable",
                                label: `${this.i18n.t('status')}`,
                                search: true,
                                hide: false,
                                value: 0,
                                type: "radio",
                                button: true,
                                dicData: disableDicData,
                                width: '100'
                            },
                            {
                                prop: "remark",
                                label: `${this.i18n.t('note')}`,
                                type: 'textarea',
                                hide: true,
                                showColumn: false,
                                span: 24,
                                rows: 2,
                                minRows: 2,
                                maxRows: 4
                            },
                            {
                                prop: "record",
                                label: `${this.i18n.t('modification_record')}`,
                                slot: true,
                                display: false,
                                showColumn: false,
                                width: 140,
                                align: `center`
                            },
                        ],
                    },
                }
            },
            created() {
                this.selectRow = {};
            },
            methods: {
                cellStyle({ row, column, rowIndex, columnIndex }) {
                    // 为状态列设置颜色
                    if (column.property === 'isDisable') {
                        if (row.isDisable == 0) {
                            return { color: '#67C23A' } // 启用状态绿色
                        } else {
                            return { color: '#F56C6C' } // 禁用状态红色
                        }
                    }
                    // 为默认项设置特殊样式
                    if (column.property === 'isDefault' && row.isDefault == 1) {
                        return {
                            color: '#E6A23C',
                            fontWeight: 'bold'
                        }
                    }
                },

                // 重写保存方法，添加自定义逻辑
                async handleRowSave(row, done, loading) {
                    try {
                        // 可以在这里添加前置处理逻辑
                        const result = await this.$axios.post(this.addUrl, row);
                        if (result.data.code === 200) {
                            this.$message.success(`${this.i18n.t('add')}${this.i18n.t('success')}`);
                            this.refreshChange();
                            done();
                        } else {
                            this.$message.error(result.data.message || `${this.i18n.t('add')}${this.i18n.t('fail')}`);
                            loading();
                        }
                    } catch (error) {
                        this.$message.error(`${this.i18n.t('add')}${this.i18n.t('fail')}`);
                        loading();
                    }
                },

                // 重写更新方法
                async handleRowUpdate(row, index, done, loading) {
                    try {
                        const result = await this.$axios.post(this.editUrl, row);
                        if (result.data.code === 200) {
                            this.$message.success(`${this.i18n.t('modify')}${this.i18n.t('success')}`);
                            this.refreshChange();
                            done();
                        } else {
                            this.$message.error(result.data.message || `${this.i18n.t('modify')}${this.i18n.t('fail')}`);
                            loading();
                        }
                    } catch (error) {
                        this.$message.error(`${this.i18n.t('modify')}${this.i18n.t('fail')}`);
                        loading();
                    }
                }
            }
        });
    </script>
}